<template>
  <div id="teamPage">
    <van-search v-model="searchText" placeholder="搜索队伍" @search="onSearch"/>
    <team-card-list :teamList="teamList"/>
    <van-empty v-if="teamList?.length < 1" description="数据为空"/>
    <van-floating-bubble
        v-model:offset="offset"
        axis="xy"
        icon="plus"
        magnetic="x"
        @click="doAddTeam"
    />
  </div>
</template>

<script setup>

import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import TeamCardList from "../components/TeamCardList.vue";
import myAxios from "../plugins/myAxios.ts";

const router = useRouter()
const searchText = ref('')

const offset = ref({x: 0, y: 550});
const doAddTeam = () => {
  router.push({
    path: '/team/add'
  })
}

const teamList = ref([]);

/**
 * 搜索队伍
 * @param val
 * @returns {Promise<void>}
 */
const listTeam = async (val = '') => {
  const res = await myAxios.get('/team/list/my/create', {
    params: {
      searchText: val,
    }
  })
  if (res.data.code === 0) {
    teamList.value = res.data.data;
  } else {
    showFailToast('加载队伍失败，请刷新重试');
  }
}

//页面加载时只触发一次
onMounted(() => {
  listTeam();
})

const onSearch = (val) => {
  listTeam(val);
}

</script>

<style scoped>

</style>
